﻿define([
  'models/abmManagers/groupManager',
  'text!templates/abmManagers/abmBaseTmp.html',
  'text!templates/abmManagers/abmFormTmp.html',
  'text!templates/abmManagers/group/common/groupEdit.html',
], function (Manager, BaseTmp, FormTmp, UniqTmp) {
    var view = Backbone.View.extend({
        el: $("#main"),
        _uId: "",
        render: function () {
            $("#mainLoading").show();
            $("div[data-rel='abm-group']").remove();
            var model = new Manager();
            var _this = this;
            this._uId = $.uuid();

            model.GetGroup(this.options.groupId, function (dataGroup) {
                var baseTemplate = Handlebars.compile(BaseTmp);
                var formTemplate = Handlebars.compile(FormTmp);
                var uniqTemplate = Handlebars.compile(UniqTmp);

                var dataBaseTemplate = {
                    id: _this._uId,
                    dataRel: "abm-group", // cuidado, ref en js
                    tmpClass: "group-edit", // cuidado, ref en css
                    title: translate("_editGroup")
                };
                var dataUniqTemplate = {
                    group: dataGroup
                };

                var html = baseTemplate(dataBaseTemplate);
                var html2 = formTemplate();
                var html3 = uniqTemplate(dataUniqTemplate);

                _this.$el.append(html);
                $("div[data-id='" + _this._uId + "']").find("div.abm-content").append(html2);
                $("div[data-id='" + _this._uId + "']").find("div.form-content").append(html3);
                
                postRender(_this.$el.find("div[data-id='" + _this._uId + "']"));

                _this.addHandlers();
                $("#mainLoading").hide();
            });
        },
        save: function () {
            var _uId = this._uId;
            
            var _groupForm = $("div[data-id='" + _uId + "']").find("form");
            if (!$(_groupForm).validate().errorList.length > 0) {
                var _name = $("div[data-id='" + _uId + "']").find("div.group-name input").val();
                var _code = $("div[data-id='" + _uId + "']").find("div.group-code input").val();

                var group = {
                    code: _code, name: _name,
                    groupId: this.options.groupId
                };
                var model = new Manager();
                model.Update(group, function () {
                    require(['controllers/abmManagers/groupManager'], function (Controller) {
                        (new Controller()).show();
                    });
                });
            }
        },
        cancel: function () {
            require(['controllers/abmManagers/groupManager'], function (Controller) {
                (new Controller()).show();
            });
        },
        addHandlers: function () {
            $("div[data-id='" + this._uId + "']").find("form").on("submit", $.proxy(function () {
                this.save();
                return false;
            }, this));
            $("div[data-id='" + this._uId + "']").find("div.submit button.btn-cancel").on("click", $.proxy(function () {
                this.cancel();
                return false;
            }, this));
            $("div[data-id='" + this._uId + "']").find("div.abm-top-options a.btn-close").on("click", this.cancel);
        }
    });
    return view;
});